<template>
  <div>
    <el-card v-if="table.IsHidden == false" class="table" :header="table.Title">
      <userTableForm
        ref="tableForm"
        :key="table.Id"
        :source="source"
        :table="table"
        :link-biz-pk="linkBizPk"
        :readonly="readonly"
        :power="power"
        :watch-col="watchCol"
        :def-state="defState"
        :label-width="table.LabelWidth"
        @change="controlChange"
      />
    </el-card>
    <div v-else class="table">
      <userTableForm
        ref="tableForm"
        :key="table.Id"
        :source="source"
        :link-biz-pk="linkBizPk"
        :table="table"
        :power="power"
        :watch-col="watchCol"
        :readonly="readonly"
        :def-state="defState"
        :label-width="table.LabelWidth"
        @change="controlChange"
      />
    </div>
  </div>
</template>

<script>
import userTableForm from './userTableForm.vue'
export default {
  components: {
    userTableForm
  },
  props: {
    linkBizPk: {
      type: String,
      default: null
    },
    table: {
      type: Object,
      default: null
    },
    defState: {
      type: Object,
      default: null
    },
    watchCol: {
      type: Object,
      default: null
    },
    dataSource: {
      type: Object,
      default: null
    },
    power: {
      type: Object,
      default: null
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      source: {}
    }
  },
  watch: {
    table: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    reset() {
      if (this.table.Columns != null) {
        const row = this.dataSource[this.table.Id]
        this.table.Columns.forEach((a) => {
          const col = a.Column
          // eslint-disable-next-line no-prototype-builtins
          if (col.ColName != null && row.hasOwnProperty(col.ColName) === false) {
            row[a.ColName] = null
          }
        })
        this.source = row
      } else {
        this.source = {}
      }
    },
    validate() {
      return this.$refs['tableForm'].validate()
    },
    controlChange(e) {
      this.$emit('change', e)
    }
  }
}
</script>

<style scoped>
.table {
  margin-bottom: 10px;
}
</style>
